<template>
    <view class="content">
        <view class="box" v-for="(item, index) in list" :key="index" @click="$gTo(`./details?id=${item.id}`)">
			<view class="item border-b">
				<view>体检预约</view>
				<view class="item-left">预约编号:{{item.order_no}}</view>
			</view>
			<view class="item">
				<view class="item-left">会员卡号：</view>
				<view class="item-right">{{item.card_no}}</view>
			</view>
			<view class="item">
				<view class="item-left">联系电话：</view>
				<view class="item-right">{{item.mobile}}</view>
			</view>
			<view class="item">
				<view class="item-left">预约会员：</view>
				<view class="item-right">
					<view>
						{{item.nickname}}({{item.thali}}<text v-if="item.is_sex_txt">-{{item.is_sex_txt}}</text>)
					</view>
				</view>
			</view>
			<view class="item">
				<view class="item-left">预约时间：</view>
				<view class="item-right">{{item.subscribe_time}}</view>
			</view>
			<view class="item">
				<view class="item-left">体检机构：</view>
				<view class="item-right">{{item.center}}</view>
			</view>
			<view class="item">
				<view class="item-left">{{item.pay_type_txt}}：</view>
				<view class="item-right">￥{{item.pay_amount}}</view>
			</view>
			
			<view class="down">
				<view>
					<view class="item">
						<view class="item-left">订单状态：</view>
						<view class="sta">{{item.status_txt}}</view>
						<!-- <view class="sta2">预约已取消</view> -->
						<!-- <view class="sta3">待体检</view> -->
					</view>
					<view class="item-left">
						查看详情
						<u-icon name="arrow-right" color="#a9a9a9" size="26"></u-icon>
					</view>
				</view>
				<view class="btn btn2" v-if="item.status == 0" @click.stop="confirm(item, 2)">预约失败</view>
				<view class="btn" v-if="item.status == 0" @click.stop="confirm(item, 1)">预约成功</view>
				<view class="btn" v-if="item.status == 1" @click.stop="finish(item)">完成体检</view>
			</view>
		</view>
		
		<view style="height: 94rpx;padding-top: 30rpx;">
		    <u-loadmore :status="status" v-if="status != 'loadmore'" />
		</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                status: 'loadmore', //是否显示没有更多了
                page: 1,
                list: [],
            };
        },
        onShow() {
        	this.list = []
        	this.page = 1
        	this.status = 'loadmore'
        	this.getList()
        },
        onReachBottom() {
        	if(this.page == 1){return}
        	this.getList()
        },
        methods: {
			// 预约成功 / 失败
			confirm(item, num) {
				this.$ajax('staff_confirm_subscribes', {
				    userToken: this.$getSync('userToken'),
				    subscribes_id: item.id,
				    status: num,//1-预约成功 2-预约失败
				}).then(ret => {
					if (ret.status == 0) {
				        this.$toast('提交成功')
						setTimeout(() => {
							this.list = []
							this.page = 1
							this.status = 'loadmore'
							this.getList()
						}, 500)
					} else {
						this.$toast(ret.message);
					}
				});
			},
			
			// 完成体检
			finish(item) {
				this.$ajax('staff_finish_subscribes', {
				    userToken: this.$getSync('userToken'),
				    subscribes_id: item.id,
				}).then(ret => {
					if (ret.status == 0) {
				        this.$toast('提交成功')
						setTimeout(() => {
							this.list = []
							this.page = 1
							this.status = 'loadmore'
							this.getList()
						}, 500)
					} else {
						this.$toast(ret.message);
					}
				});
			},
			
            getList() {
            	if (this.status == 'nomore') return;
            	this.status = 'loading';
            	this.$ajax('staff_subscribes_list', {
                    userToken: this.$getSync('userToken'),
                    page: this.page,
                    limit: 10,
                }).then(ret => {
            		if (ret.status == 0) {
                        if (ret.data.length > 0) {
                        	this.list = this.list.concat(ret.data);
                        	this.page++;
                        	this.status = 'loadmore'
                        } else {
                        	this.status = 'nomore'
                        }
            		} else {
            			this.$toast(ret.message);
            		}
            	});
            },
        }
    };
</script>

<style lang="scss">
    page{
        background-color: #f5f5f5;
    }
	.content{
		padding: 20rpx;
	}
	.box{
		padding: 35rpx 30rpx;
		margin-bottom: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		font-size: 26rpx;
	}
	.item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 15rpx;
	}
	.item:last-child{
		padding-bottom: 0;
	}
	.border-b{
		border-bottom: 2rpx solid #e6e6e6;
		margin-bottom: 25rpx;
	}
	.item-left{
		color: #a6a6a6;
	}
	.item-right{
		flex: 1;
		display: flex;
		justify-content: space-between;
		align-items: center;
		word-break: break-all;
		white-space: pre-line;
	}
	
	
	
	
	.sta{
		color: #01b6bc;
	}
	.sta2{
		color: #fe8928;
	}
	.sta3{
		color: #249bef;
	}
	.down{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 20rpx;
		border-top: 2rpx solid #e6e6e6;
	}
	.btn{
		padding: 12rpx 27rpx;
		font-size: 26rpx;
		color: #fff;
		background-color: #01b6bc;
		border-radius: 50rpx;
	}
	.btn2{
		background-color: #999999;
	}
	

</style>
